<template>
	<view style="padding-bottom:50rpx;">
		<image class="topbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
		<view style="width:100%;" :style="{'height': statusheadheight + 'px'}"></view>
		<view class="head-main" :style="{'height': statusheadheight + 'px'}">
			<image class="headbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
			<!-- @click="selesite" -->
			<view class="headsite flex" :style="{ height:ClientRectHeight+'px',lineHeight:ClientRectHeight+'px' }" @click="districtfun">
				<uv-icon name="map" size="16" color="#040000"></uv-icon>
				<text style="font-size:28rpx;margin: 0 10rpx;">{{ opensiteac.city_name || sitemsg.city }}</text>
				<uv-icon name="arrow-down-fill" size="14" color="#040000"></uv-icon>
			</view>
			<view class="head-title" :style="{ height:ClientRectHeight+'px',lineHeight:ClientRectHeight+'px' }"></view>
		</view>
		<view class="banner marginAuto" style="margin-top: 30rpx;">
			<uv-swiper @click="clickbanner" class="banner" height="160" :list="bannerdata" keyName="image"></uv-swiper>
		</view>
		<view class="fun">
			<view class="funmain marginAuto flex">
				<view class="funeach" @click="navigatement(1,'/pages/my/mydriveryy')">
					<image class="funeachbg" :src="apifun.serveimg+'accfun1.png'" mode="aspectFill"></image>
					<view class="funeachtext">
						<view class="funeachtext-title" style="color:#08316C;">随机预约</view>
						<view class="funeachtext-go">客服安排教练></view>
					</view>
				</view>
				<view class="funeach" @click="navigatement(2,'/pages/my/mydriverzylist')">
					<image class="funeachbg" :src="apifun.serveimg+'accfun2.png'" mode="aspectFill"></image>
					<view class="funeachtext">
						<view class="funeachtext-title" style="color:#6C0B08;">教练直约</view>
						<view class="funeachtext-go">自己指定教练></view>
					</view>
				</view>
				<view class="funeach" @click="navigate('/pages/accompany/course')">
					<image class="funeachbg" :src="apifun.serveimg+'accfun4.png'" mode="aspectFill"></image>
					<view class="funeachtext">
						<view class="funeachtext-title" style="color:#60086C;">陪驾课程</view>
						<view class="funeachtext-go">点击查阅></view>
					</view>
				</view>
			</view>
		</view>
		<view class="meal">
			<view class="mealname marginAuto">特惠套餐</view>
			<view class="meallist">
				<view class="dritem marginAuto" v-for="(item,index) in tcdatas" :key="index" @click="buytc(item,index)">
					<view class="dritemgoods flex">
						<view class="cardeachbimg">
							<image class="goodsimg" :src="apifun.URLimg+item.image" mode="aspectFill"></image>
						</view>
						<view class="cardeachbmsg">
							<view class="cardeachbmsg-name flex">
								<view class="cardeachbmsg-namen ellipsis01">{{ item.name }}</view>
							</view>
							<view class="starty">
								<view class="jlq">{{ item.min }}小时起约</view>
								<view class="jlq">{{ item.sale_num }}已售</view>
							</view>
							<view class="cardeachbmsg-jl">
								<text style="color:#FC2A2A;font-size:24rpx;">￥</text>
								<text style="color:#FC2A2A;font-size:36rpx;">{{ item.price }}</text>
								<text style="color:#666666;font-size:24rpx;margin-left: 20rpx;text-decoration: line-through;">￥{{ item.old_price }}</text>
							</view>
							<view class="cardeachbmsg-site flex">
								<view class="site flex">有效期：{{ item.day }}天</view>
								<view class="cardbtn flex">
									<view class="cardbtneach mainBg baiColor">购买</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-picker ref="siteref" :columns="opensitedata" keyName="city_name" @confirm="entersite"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				ClientRectHeight:uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				page:1,
				// lng: '113.72443142361111',
				// lat: '34.69050835503472',
				lng: '',
				lat: '',
				sitemsg:{},
				bannerdata:[],
				tcdatas:[],
				opensitedata:[[]],
				opensiteac:{},
			};
		},
		onLoad() {
			// this.getpositionfun();  // 废弃-用选择地图
			// this.getLocationInfofun();  // 开发环境
			this.sitemsg = uni.getStorageSync('sitemsg');  // adcode、city
			this.opensiteac = {
				city_id:uni.getStorageSync('sitemsg').adcode,
				city_name:uni.getStorageSync('sitemsg').city,
			};
			this.initbanner();
		},
		onShow() {
			this.page = 1;
			this.tcdatas = [];
			this.getopensitefun();
			this.getpositionfun();
			this.initdata();
			// if(uni.getStorageSync('token')){
			// 	this.initdata();
			// }
		},
		methods: {
			getpositionfun(){  // 获取位置
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success:(res)=> {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
						this.getLocationInfofun();
					}
				});
			},
			getLocationInfofun(){
				let sendData = {
					lng:this.lng,
					lat:this.lat,
				};
				this.apifun.unirequest('/api/index/getLocationInfo','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.sitemsg = datas.ad_info;
						uni.setStorageSync('lat', this.lat);
						uni.setStorageSync('lng', this.lng);
						uni.setStorageSync('sitemsg', datas.ad_info);
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			buytc(item,index){
				if(!uni.getStorageSync('token')){
					this.wxlogin()
					return false
				};
				uni.setStorageSync('mealxqsite',this.opensiteac);
				setTimeout(()=>{
					this.navigate('/pages/accompany/mealxq','id='+item.id)
				},500)
			},
			initbanner(){
				this.apifun.unirequest('/api/partnerDrive/banner','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let banner = [];
						datas.forEach((item,index)=>{
							banner.push({
								image:this.apifun.URLimg+item.img,
								type:item.type,
								content:item.content
							});
						});
						this.bannerdata = banner;
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true);
			},
			clickbanner(index) {
				let banneritems = this.bannerdata[index];
				if(banneritems.type == 0){
					this.apifun.navigate('/'+banneritems.content)
				}else{
					uni.setStorageSync('bannerxq',banneritems.content);
					setTimeout(()=>{
						this.apifun.navigate('/pages/home/bannerxq')
					},300)
				}
			},
			initdata(){
				let sendData = {
					city_id:this.opensiteac.city_id,
					page:this.page,
					limit:this.apifun.limit
				}
				this.apifun.unirequest('/api/partnerDrive/getEscortMenuList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.tcdatas = [...this.tcdatas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			selesite(){
				uni.chooseLocation({
					success: (res) => {
						this.city = res.name;
						this.lng = res.longitude;
						this.lat = res.latitude;
					}
				});
			},
			navigatement(type,urls){  // 预约 type：1随机预约 2教练直约
				// this.apifun.navigate('/pages/accompany/nomeal');   //  未购买套餐
				this.navigate(urls);  // 购买过套餐
			},
			districtfun(){ // 地区
				this.$refs.siteref.open();
				this.getopensitefun();
			},
			entersite(e){
				this.opensiteac = e.value[0];
				uni.setStorageSync('servesitemsg',this.opensiteac);
				this.page = 1;
				this.tcdatas = [];
				this.initdata();
			},
			getopensitefun(){  // 获取地址
				this.apifun.unirequest('/api/partnerDrive/getOpenCityArr','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.length > 0){
							let sitemsg_city;
							if(uni.getStorageSync('servesitemsg')){
								sitemsg_city = uni.getStorageSync('servesitemsg').city_name;
							}else{
								sitemsg_city = uni.getStorageSync('sitemsg').city;
							};
							datas.forEach((item,index)=>{
								if(item.city_name == sitemsg_city){
									this.opensiteac = item;
									uni.setStorageSync('servesitemsg',item);
								}
							})
						}
						this.opensitedata[0] = datas;
						this.page = 1;
						this.tcdatas = [];
						this.initdata();
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			// --获取经纬度（废弃）
			getpositionfun(){  // 获取位置  （废弃-用选择地图）
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success: (res) => {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
						this.getLocationInfofun();
					}
				});
			},
			getLocationInfofun(){
				let sendData = {
					lng:this.lng,
					lat:this.lat,
				};
				this.apifun.unirequest('/api/index/getLocationInfo','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.sitemsg = datas.ad_info;
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			navigate(urls,params){
				if(uni.getStorageSync('token')){
					this.apifun.navigate(urls,params)
				}else{
					this.wxlogin()
				}
			},
			wxlogin() {
				uni.getProvider({
					service: "oauth",
					success:(res) => {
						uni.login({
							provider: 'weixin', //使用微信登录
							scopes: 'auth_user',
							success: (loginRes) => {
								this.getopenid(loginRes.code);
							},
						})
					}
				})
			},
			getopenid(code){
				let sendData = {
					code: code,
				};
				this.apifun.unirequest('/api/wx/getOpenId', 'post', sendData, (res) => {
					if (res.code === 200) {
						let datas = res.data;
						this.apifun.navigate('/pages/start/login','&openid='+datas)
					} else {
						this.apifun.toast(res.msg)
					}
				}, true,true)
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.tcdatas = [];
			this.initdata();
			this.initbanner();
			this.getpositionfun();  // 正式环境
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initdata()
		},
	};
</script>

<style scoped lang="scss">
	// 头部
	.topbg{
		position:fixed;
		top: 0;
		left: 0;
		z-index:0;
		width: 100%;
		height:800rpx;
	}
	.head-main{
		position:fixed;
		top: 0px;
		left: 50%;
		margin-left: -50%;
		z-index:888;
		width: 100%;
		overflow: hidden;
		.headbg{
			width: 100%;
			height:800rpx;
			background-attachment: fixed;
		}
		.headsite{
			position: absolute;
			bottom: 0px;
			left: 24rpx;
			color: #222;
			width:230rpx;
			overflow: hidden;
		}
		.head-title{
			position: absolute;
			width: 50%;
			left: 50%;
			margin-left: -25%;
			bottom: 0px;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}
	}
	.banner{
		position: relative;
		z-index: 10;
		width: 690rpx;
		height: 320rpx;
	}
	// 卡片
	.funmain{
		position: relative;
		z-index: 10;
		width: 690rpx;
		padding:30rpx 0 10rpx;
		justify-content: space-between;
		.funeach{
			position: relative;
			width:220rpx;
			height:110rpx;
			.funeachbg{
				position:absolute;
				top: 0;
				left: 0;
				width:220rpx;
				height:110rpx;
			}
			.funeachtext{
				position: relative;
				z-index: 10;
				.funeachtext-title{
					font-size: 30rpx;
					font-weight: 600;
					margin-left: 20rpx;
					padding-top: 10rpx;
				}
				.funeachtext-go{
					color: #999999;
					font-size: 20rpx;
					margin-left: 20rpx;
					line-height:40rpx;
				}
			}
		}
	}
	// 商品列表
	.meal{
		position: relative;
		z-index: 10;
		.mealname{
			width: 690rpx;
			padding: 40rpx 0 30rpx;
			color: #222222;
			font-size: 34rpx;
			font-weight:500;
		}
		.meallist{
			.dritem{
				width: 690rpx;
				padding:10rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				.dritem-top{
					justify-content: space-between;
					padding: 10rpx 0;
					.dritemtl{
						.jlq{
							display: inline-block;
							padding:0 10rpx;
							background:#FFEFE4;
							color:#FF720C;
							font-size:20rpx;
							border-radius:6rpx;
							height:50rpx;
							line-height:50rpx;
							margin-right: 10rpx;
						}
						.dritemtltxt{
							font-size: 28rpx;
							color: #222222;
							line-height: 50rpx;
						}
					}
					.dritemtr{
						font-size: 26rpx;
						line-height: 50rpx;
					}
				}
				.dritemgoods{
					padding: 20rpx 0;
					.cardeachbimg{
						position: relative;
						width: 240rpx;
						height: 210rpx;
						.xxhf{
							position: absolute;
							z-index: 10;
							left: -10rpx;
							top:8rpx;
							height: 50rpx;
						}
						.goodsimg{
							width: 240rpx;
							height: 210rpx;
							border-radius:10rpx;
						}
					}
					.cardeachbmsg{
						flex: 1;
						margin-left: 20rpx;
						.cardeachbmsg-name{
							color: #333333;
							font-size:30rpx;
							line-height: 50rpx;
							justify-content: space-between;
							.cardeachbmsg-namen{
								width:60%;
								font-weight: 600;
							}
							.cardeachbmsg-namestatus{
								font-size: 26rpx;
							}
						}
						.starty{
							padding:5rpx 0;
							.jlq{
								display: inline-block;
								padding:0 10rpx;
								background:#E7F2FF;
								color:#0089FB;
								font-size:20rpx;
								border-radius:6rpx;
								height: 40rpx;
								line-height: 40rpx;
								margin-right: 10rpx;
							}
						}
						.cardeachbmsg-jl{
							padding-top: 10rpx;
							font-size: 26rpx;
							line-height:40rpx;
						}
						.cardeachbmsg-site{
							justify-content: space-between;
							line-height:50rpx;
							.site{
								font-size: 24rpx;
								color:#999999;
								line-height:50rpx;
							}
							.cardbtn{
								.cardbtneach{
									width: 130rpx;
									height: 55rpx;
									line-height: 55rpx;
									font-size:28rpx;
									text-align: center;
									border-radius: 100rpx;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
				.drbtn{
					justify-content: end;
					.cardbtneach{
						width: 140rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size:28rpx;
						text-align: center;
						border-radius: 100rpx;
						margin-left: 20rpx;
						border: 1px solid #1686F8;
					}
				}
			}
		}
	}
	
</style>